<template>
  <div>
    <div class="row-header">
      <!--移动/联通/电信/所有-->
      <div class="row-btn-block">
        <template v-for="item in cardOprations">
          <div :class="['row-btn-block-item', queryForm.cardOperator==item.name?item.color:'']" @click="handleClick(item.name)">
            <img v-if="queryForm.cardOperator==item.name" :src="item.img2" />
            <img v-if="queryForm.cardOperator!=item.name" :src="item.img1" />
            <span>{{item.label}}</span>
          </div>
        </template>
      </div>
      <el-form :model="queryForm" ref="queryForm" label-width="50px" :inline="true">
        <el-form-item label=" " prop="channelCompanyId">
          <el-select size="small" v-model="queryForm.channelCompanyId" placeholder="请选择所属通道" style="width: 300px">
            <el-option v-for="operator in dictFromOperatorSelect" :key="operator.value" :label="operator.label"
                       :value="operator.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label=" " prop="dictMayChangeCardStatus">
          <el-select v-model="queryForm.dictMayChangeCardStatus" placeholder="请选择备用卡状态" style="width: 300px"
                     size="small">
            <el-option v-for="ChangeCardStatus in dictMayChangeCardStatusArray" :key="ChangeCardStatus.value"
                       :label="ChangeCardStatus.label" :value="ChangeCardStatus.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label=" " prop="cardNumber">
          <el-input size="small" v-model.trim="queryForm.cardNumber" placeholder="请输入业务号码" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label=" " prop="iccid">
          <el-input size="small" v-model="queryForm.iccid" placeholder="请输入iccid" style="width: 300px"></el-input>
        </el-form-item>
      </el-form>
      <div class="row-form-btn">
        <el-button type="shenda" size="small" @click="crmCardListForSpare" icon="el-icon-search">查询</el-button>
        <el-button type="shenda" size="small" @click="resetForm('queryForm')" icon="el-icon-refresh-right">重置</el-button>
        <el-button type="shenda" size="small" :loading="loading" @click="downLoadExl" icon="el-icon-download">导出</el-button>
      </div>
    </div>
    <div class="split-line"></div>
    <div class="row-main">
      <el-table v-has="'cardListOemListTable'" :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }" :data="tableData" ref="table"
                tooltip-effect="dark" class="row-main-table" @selection-change="handleSelectionChange"
                v-loading.fullscreen="tableLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.2)"
                @sort-change="changeSort" :row-key="getRowKeys">
        <el-table-column type="selection" :reserve-selection="true" align="center"></el-table-column>
        <el-table-column sortable="custom" prop="companyName" label="通道公司" align="center"></el-table-column>
        <el-table-column sortable="custom" prop="cardNumber" label="业务号码" align="center"></el-table-column>
        <el-table-column sortable="custom" prop="iccid" label="ICCID" align="center"></el-table-column>
        <el-table-column prop="dictMayChangeCardStatusName" label="备用卡状态" align="center"></el-table-column>
        <el-table-column prop="dictChannelCardStatusName" label="卡状态" align="center"></el-table-column>
        <el-table-column sortable="custom" prop="insertTime" label="创建时间" align="center"></el-table-column>
      </el-table>
      <div :style="{'overflow-x': $store.state.app.screenWidth<992?'scroll':'none'}">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="currentPage" :page-size="pageSize" class="row-main-pager"
                     layout="total, sizes, prev, pager, next, jumper" :total="totalPage"
                     :page-sizes="[10,20,50,100,]" background></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    crmCardListForSpare,
    getChannelcompanyForSelect
  } from '@/api/getData'
  import icon_y1 from "@/assets/images/icon-y1.png";
  import icon_y2 from "@/assets/images/icon-y2.png";
  import icon_d1 from "@/assets/images/icon-d1.png";
  import icon_d2 from "@/assets/images/icon-d2.png";
  import icon_l1 from "@/assets/images/icon-l1.png";
  import icon_l2 from "@/assets/images/icon-l2.png";
  export default {
    name: 'List',
    data() {
      return {
        pageSize: 10,
        currentPage: 1,
        totalPage: 0,
        ascs: [],
        descs: [],
        maxPage: 1,
        flag: false,
        tableData: [],
        loading: false,
        tableLoading: false,
        dictFromOperatorSelect: [],
        dictMayChangeCardStatusArray: [
          {
            value: '',
            label: "请选择备用卡状态"
          },
          {
            value: 'CHANGED',
            label: '已更换'
          },
          {
            value: 'NOT_EXCHANGE',
            label: '未更换'
          },
        ],
        queryForm: {
          dictMayChangeCardStatus: '',
          channelCompanyId: '',
          cardOperator: 'CARDTELECOM',
          iccid: '',
          cardNumber: ''
        },
        cardOprations: [
          {label: '电信', name: 'CARDTELECOM', img1: icon_d1, img2: icon_d2, color: 'icon-color2' },
          {label: '移动', name: 'CARDMOBILE', img1: icon_y1,  img2: icon_y2, color: 'icon-color3' },
          {label: '联通', name: 'CARDUNICOM', img1: icon_l1,  img2: icon_l2, color: 'icon-color4' },
        ],
        cardOperator: '',
      }
    },
    computed: {},
    created() {
      this.innitChannelSelect();
      this.crmCardListForSpare();
    },
    methods: {
      resetForm(formName){
        this.$refs[formName].resetFields();
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.currentPage =1;
        this.crmCardListForSpare();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.crmCardListForSpare()
      },
      //切换卡运营商类别选项卡
      handleClick(name) {
        this.queryForm.cardOperator = name
        if (name == 'CARDMOBILE') {
          this.flag = true;
        } else {
          this.flag = false;
        }
        this.crmCardListForSpare()
      },
      async innitChannelSelect() {
        this.tableLoading = true;
        const returnData = await getChannelcompanyForSelect({})
        this.dictFromOperatorSelect = [{vlaue:'',label:'请选择所属通道'}]
        if (returnData._result) {
          for (let i = 0; i < returnData.data.length; i++) {
            const obj = {}
            obj.value = returnData.data[i].id
            obj.label = returnData.data[i].operatorBranch
            this.dictFromOperatorSelect.push(obj)
          }
        }
        this.tableLoading = false;
      },
      async crmCardListForSpare() {
        // this.currentPage = 0;
        this.tableLoading = true;
        const returnData = await crmCardListForSpare({
            dictCardOperator: this.queryForm.cardOperator,
            channelCompanyId: this.queryForm.channelCompanyId,
            dictMayChangeCardStatus: this.queryForm.dictMayChangeCardStatus,
            cardNumber: this.queryForm.cardNumber,
            iccid: this.queryForm.iccid,
            page: {
              current: this.currentPage + '',
              size: this.pageSize + '',
              ascs: this.ascs,
              descs: this.descs
            }
          },
          {
            obj: this,
            key: 'tableLoading'
          })
        this.tableData = []
        if (returnData._result) {
          this.maxPage = Math.ceil(returnData.data.total / this.pageSize) // 分页的最大页数
          this.totalPage = returnData.data.total;

          // 数据回显
          returnData.data.records.map(item => {
            const obj = {}
            obj.id = item.id
            obj.iccid = item.iccid
            obj.msisdn = item.msisdn
            obj.imsi = item.imsi
            obj.dictChannelCardStatus = item.dictChannelCardStatus // 卡状态值
            obj.dictChannelCardStatusName = item.dictChannelCardStatusName // 卡状态
            obj.cardNumber = item.cardNumber // 业务号码
            if (item.dictExamineStatus == "USER_PASS") {
              obj.dictExamineStatusName = item.customer.customerName
            } else {
              obj.dictExamineStatusName = item.dictExamineStatusName // 是否实名
            }
            obj.insertTime = item.insertTimeDate
            obj.dictMayChangeCardStatusName = item.dictMayChangeCardStatusName
            obj.dictMayChangeCardStatus = item.dictMayChangeCardStatus
            obj.companyName = item.companyName
            this.tableData.push(obj)
          })

        }
        this.tableLoading = false
      },
      getRowKeys(row) {
        return row.id
      },
      changeSort(column) {
        //console.log(column);
        if (column.order == 'ascending') {
          this.descs = []
          this.ascs = [column.prop];
        } else {
          this.ascs = []
          this.descs = [column.prop];
        }
        this.crmCardList();
        // this.selectStatistics()
      },
      async downLoadExl() {
        this.loading = true;
        this.tableLoading = true;
        let obj = {
          dictCardOperator: this.queryForm.cardOperator,
          channelCompanyId: this.queryForm.channelCompanyId,
          dictMayChangeCardStatus: this.queryForm.dictMayChangeCardStatus,
          cardNumber: this.queryForm.cardNumber,
          iccid: this.queryForm.iccid,
          page: {
            current: '1',
            size: this.totalPage + '',
            ascs: this.ascs,
            descs: this.descs
          }
        };
        let arr = new Array(...this.$refs.table.columns);
        arr.shift();
        let list = [];
        let filterVal = [];
        for (let item of arr) {
          list.push(item.label);
          filterVal.push(item.property);
        }
        let info = {
          api: 'crmCardListForSpare',
          name: '备用卡列表'
        };
        this.tableLoading = false;
        this.loading = false;
        const { href } = this.$router.resolve({
          path: '/exl/exlDownload',
          query: {
            list: JSON.stringify(list),
            filterVal: JSON.stringify(filterVal),
            obj: JSON.stringify(obj),
            info: JSON.stringify(info),
          }
        });
        window.open(href, '_blank');
      }
    }
  }
</script>

<style scoped lang="scss">
  .el-container {
    .el-header {
      margin-top: 3vh;

      .box /deep/ label {
        text-align: left;
      }

      .line {
        text-align: center;
      }

      .el-form-item {
        margin-bottom: 10px;
      }

      .export {
        margin-bottom: 0px;
      }

      .export /deep/ button {
        margin-right: 10px;
      }
    }

    .el-main {
      .el-form-item {
        margin-bottom: 10px;
      }

      .el-dropdown-link {
        font-size: 20px;
        cursor: pointer;
      }

      .block {
        float: right;
        position: relative;
        top: 37px;
      }

      .data {
        text-align: center;

        .echo {
          color: red;
        }
      }

      .data /deep/ span {
        text-align: center;
        font-size: 14px;
        font-family: 微软雅黑;
        line-height: 40px;
        color: #606266;
        font-weight: 700;
      }

      .data /deep/ a {
        text-align: center;
        font-size: 14px;
        font-family: 微软雅黑;
        line-height: 40px;
        font-weight: 700;
      }

      .data {
        position: relative;
        top: -32px;

        .el-col {
          display: flex;
          justify-content: space-between;

          span {
            display: inline-block;
            text-align: center;
          }
        }
      }
    }
  }

  .el-popper[x-placement^=bottom] {
    margin-right: -31px;
    box-shadow: 0px 0px 10px #888888;
    margin-left: 6px;

    .operation {
      border: 0;
      outline: none;
      display: block;
      text-align: center;
      margin: 0;
    }
  }

  .el-popper[x-placement^=top] {
    box-shadow: 0px 0px 10px #888888;
    margin-left: 6px;
    margin-right: -31px;

    button {
      display: block;
    }

    .operation {
      border: 0;
      outline: none;
      display: block;
      text-align: center;
      margin: 0;
    }
  }
</style>
